<template>
  <div class="question-form">
    <!-- 题型 -->
    <div class="line title">
      <el-row v-if="showList.data">
        <el-col :span="6">【题型】: {{ showList.data.questionType | questionTypes }}</el-col>
        <el-col :span="6">【编号】：{{ showList.data.id }}</el-col>
        <el-col :span="6">【难度】：{{ showList.data.difficulty | difficultType }}</el-col>
        <el-col :span="6">【标签】：{{ showList.data.tags }}</el-col>
        <el-col :span="6">【学科】：{{ showList.data.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ showList.data.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ showList.data.direction }}</el-col>
      </el-row>
    </div>
    <!-- 题干 -->
    【题干】：
    <!-- {{ showList.data }} -->
    <p v-if="showList.data" v-html="showList.data.question"></p>
    <!-- <div v-html="test" style="color:blue"></div> -->
    <div v-if="showList.data ? showList.data.questionType !== '3': false" class="line">
      <div style="padding-bottom:5px">
        {{showList.data.questionType | questionTypes}}
        选项：（以下选中的选项为正确答案）
      </div>
      <div
        v-for="item in showList.data.options"
        :key="item.code"
        style="padding:8px 0">
        <el-radio
        v-if="showList.data.questionType === '1'"
        :value="item.isRight"
        :label="1">
        {{ item.title }}
        </el-radio>
        <el-checkbox
          v-if="showList.data.questionType === '2'"
          :value="item.isRight ? true : false">
          {{ item.title }}
          </el-checkbox>
      </div>
    </div>
    <!-- 参考答案 -->
    <div class="line">
      <el-row>
        <el-col :span="24">
          【参考答案】：
          <el-button type="danger" @click="showRadio = true" size="mini" >视频答案预览</el-button>
          <div v-if="showRadio">
            <video :src="showList.data.videoURL" controls width="50%" ref="video"></video>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 答案解析 -->
    <div class="line">
     【答案解析】：<span class="anserBox" v-if="showList.data" v-html="showList.data.answer">
     </span>
     </div>
    <!-- 题目备注 -->
    <div class="line">
      <el-row v-if="showList.data">
        <el-col :span="24" border="1px">
          【题目备注】: {{ showList.data.remarks }}</el-col>
      </el-row>
    </div>
    <el-row>
      <el-col :push="21">
        <el-button type="primary" @click="btn">关闭</el-button></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'Question',
  props: {
    showList: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      showRadio: false // 展示视频答案预览
    }
  },
  methods: {
    // 关闭按钮
    btn () {
      this.$emit('close')
      this.showRadio = false
    }
  },
  computed: {
    test () {
      console.log()
      return this.showList.data.question
    }
  }
}
</script>
<style scoped lang="scss">
    .line {
      border-bottom: 1px solid #000;
      }
    .el-col {
       margin: 10px 0;
       }
    .title {
      margin-bottom: 10px;
      }
      .anserBox{
        display: inline-block;
      }
    </style>
